<template>
  <div class="dev-list">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>卡拉扬大囧智能书包规格表</span>
        </div>
      </template>
      <el-descriptions title direction="vertical" :column="5" :size="size" bordered>
        <el-descriptions-item label="背包类型">K0-12012</el-descriptions-item>
        <el-descriptions-item label="设备MAC">50:FB:19:E0:B7:7A</el-descriptions-item>
        <el-descriptions-item label="接入日期">2022-01-03</el-descriptions-item>
        <el-descriptions-item label="固件版本">2022-01-03</el-descriptions-item>
        <el-descriptions-item label="健康报告">
          <el-button :icon="Document" round @click="get_report">查看</el-button>
        </el-descriptions-item>
      </el-descriptions>

      <div class="find-data">
        <span>查询数据</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
        ></el-date-picker>
        <el-button :icon="Search" circle class="bt_find"></el-button>
      </div>
    </el-card>
    <el-card>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="index" label="序号" width="80" />
        <el-table-column prop="name" label="开始时间" width="180" />
        <el-table-column prop="user" label="持续时长" width="180" />
        <el-table-column prop="date" label="左肩重量" width="180" />
        <el-table-column prop="date" label="左肩重量" width="180" />
        <el-table-column prop="date" label="总重量" width="180" />
        <el-table-column prop="date" label="姿态角度" width="180" />
        <!-- <el-table-column prop="mark" label="备注" /> -->
      </el-table>
      <el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { Search, Document } from '@element-plus/icons-vue'
import VueEvent from '../utils/event';
let msg = "ok";
const get_report = () => {
  VueEvent.emit("RightDiv", { msg });
}

const tableData = [
  {
    index: '1',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '2',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '3',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '4',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '5',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '6',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '7',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '8',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '9',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
  {
    index: '10',
    name: '曾伟',
    user: 'admin',
    date: '2016-05-03',
    mark: '普通用户'
  },
]
</script>

<style>
.dev-list {
  width: 80%;
}

.find-data {
  width: 100%;
  height: 50px;
  margin-top: 20px;
}

.find-data span {
  display: inline-block;
  width: 120px;
  text-align: left;
}

.bt_find {
  margin-left: 15px;
}
</style>